<template>
 <t-image-viewer v-if="!store.isMobileType" v-model:visible="ImgVisible" :images="[urls + props.info.value]">
    </t-image-viewer>
    <van-image-preview :show-index="false" v-else v-model:show="ImgVisible" :images="[urls + props.info.value]">
    </van-image-preview> 
  <div class="outline-parent jy-style-height ">
    
    <div class="content-parent border-hover-style">
      <div class="digitalShowroom-p" v-if="props.info.digitalShowroom">
        <!-- digitalShowroom -->
        <digitalShowroomIcon :url="props.info.digitalShowroom" />
      </div>
      <div class="title-box" :class="{ 'title-box2': props.info.text.length > 9 }">
        <div class="title1" v-if="props.info.text.length <= 9">
          {{ props.info.text }} 
        </div> 
        <div class="title-2" v-else>
          <div class="title-2-left">
            <div class="solid"></div>
            {{ titleSubsectionLeft }}
          </div>

          <div class="title-2-right">
            {{ titleSubsectionRight }}
          </div>
        </div>
      </div>
      <div class="subtitle">
        {{ props.info.subTitle }}
      </div>
      <div class="img-box" v-if="props.info.value"  @click="ImgVisible = true">
        <img
          class="outline-cover"
         
          :src="urls + props.info.value + '?imageView2/3/format/webp'"
          alt=""
        />
        <div class="radio1 radio"></div>
        <div class="radio2 radio"></div>
        <div class="radio3 radio"></div>
        <div class="radio4 radio"></div>
      </div>
      <div class="remarks1" v-if="props.info.value">
        <TextMax
          :infoData="props.info"
          v-if="props.domShow"
          :data="props.info.remarks"
          :title="props.info.text"
          :row="4"
        ></TextMax>
      </div>
      <div class="remarks2" v-else>
        <TextMax
          :infoData="props.info"
          v-if="props.domShow"
          :data="props.info.remarks"
          :title="props.info.text"
          :row="7"
        ></TextMax>
      </div>
    </div>
  </div>
</template>   

<script lang="ts">
export default defineComponent({
  name: 'free3Style5',
});
</script>

<script setup lang="ts">
import digitalShowroomIcon from '@/freeComponents/unitdigitalShowroom/style1.vue';
import { publicUrls } from '@/utils/minxin';
import { getTextHtml, textType } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import { computed, defineComponent, ref } from 'vue';
import TextMax from '@/freeComponents/textMode/TextMax3.vue';
import { useProjectStore } from '@/store';

const ImgVisible = ref(false);
const store = useProjectStore();
const title = ref();

const props = defineProps({
  info: {
    type: Object,
  },
  domShow: {
    type: Boolean,
  },
});
const titleSubsectionLeft = computed(() => {
  //将文字分段处理 import {titleSubsection} from "@/utils/minxin"
  // 移除文本两端的空格
  let index = 8;
  let text = props.info.text.trim();
  if (text.length <= 8) {
    return text;
  }

  // 尝试按空格分割文本
  let midIndex = Math.ceil(text.length / 2); // 使用Math.ceil确保第二行不会太短

  // 如果直接分割会导致第二行过短（例如文本长度为9时），则将中点向后移动
  if (midIndex * 2 < text.length) {
    midIndex++;
  }

  // 分割文本为两行
  let firstLine = text.substring(0, midIndex);
  let secondLine = text.substring(midIndex);
  return firstLine; //`${firstLine}</br>${secondLine}`;
});
const titleSubsectionRight = computed(() => {
  //将文字分段处理 import {titleSubsection} from "@/utils/minxin"
  // 移除文本两端的空格
  let index = 8;
  let text = props.info.text.trim();
  if (text.length <= 8) {
    return text;
  }

  // 尝试按空格分割文本
  let midIndex = Math.ceil(text.length / 2); // 使用Math.ceil确保第二行不会太短

  // 如果直接分割会导致第二行过短（例如文本长度为9时），则将中点向后移动
  if (midIndex * 2 < text.length) {
    midIndex++;
  }

  // 分割文本为两行
  let firstLine = text.substring(0, midIndex);
  let secondLine = text.substring(midIndex);
  return secondLine; //`${firstLine}</br>${secondLine}`;
});
</script>

<style scoped lang="less">
.outline-parent {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  margin-right: 140px;
  margin-left: 80px;
  margin-top: 0;
}

.content-parent {
  display: flex;
  flex-direction: column; 
  align-items: center;
  position: relative;
  width: 352px;
  height: 774px;
  background-image: url('https://static.jiyi.show/free/style3/Level2outlineStyle3Bg.webp');
  background-size: 100% 100%;
}

.title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 56px;
  height: 292px;
  background: #e1dbcf;
  box-shadow: inset 0px 5px 0px 0px #63413f, inset 0px -5px 0px 0px #63413f;
  border: 1px solid #63413f;
  padding-bottom: 20px;
}
.title-box2 {
  width: 96px;
}
.title1 {
  width: 24px;
  font-family: SourceBold;
  font-size: 24px;
  color: #2f1b16;
  line-height: 28px;
}

.title-2 {
  display: flex;
  align-items: flex-end;
}
.title-2-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 24px;

  font-family: SourceBold;
  font-size: 24px;
  color: #2f1b16;
  line-height: 28px;
  margin-right: 16px;
}
.solid {
  position: absolute;
  top: 18px;
  right: -8px;
  width: 1px;
  height: calc(100% - 36px);
  background: #63413f;
}
.title-2-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 24px;
  font-family: SourceBold;
  font-size: 24px;
  color: #2f1b16;
  line-height: 28px;
}
.subtitle {
  width: 270px;
  height: 48px;
  font-family: SourceMedium;
  font-size: 18px;
  color: #2f1b16;
  line-height: 24px;
  text-align: center;
  opacity: 0.5;
  margin-top: 30px;
}
.img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 270px;
  height: 160px;
  background: #623333;
  margin-top: 24px;
  // border-radius: 8px;
}
.outline-cover {
  height: 160px;
  width: auto;
  max-width: 270px;
  object-fit: contain;
  transition: all 0.3s;
}
.outline-cover:hover {
  transform: scale(1.2);
}
.radio {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e1dbcf;
  z-index: 6;
}
.radio1 {
  top: -8px;
  left: -8px;
}
.radio2 {
  top: -8px;
  right: -8px;
}
.radio3 {
  bottom: -8px;
  left: -8px;
}
.radio4 {
  bottom: -8px;
  right: -8px;
}
.remarks1 {
  width: 270px;
  margin-top: 16px;
}
.remarks2 {
  width: 270px;
  margin-top: 104px;
}
.digitalShowroom-p {
  width: 46px;
  height: 46px;
  position: absolute;
  top: 32px; 
  right: 46px;

  z-index: 15;
}
</style>